<template>
  <text-box-group-panel
    title="供配电"
    :reading="reading"
    :info="info"
  >
  <router-link class="router" slot="router" to="/dashboard/electrical"></router-link>
  </text-box-group-panel>
</template>

<script>
import TextBoxGroupPanel from './text-box-group-panel'
import DEVICE_TYPES from 'config/device-types'
import _ from 'lodash'

export default {
  name: 'Ammeter',

  components: {
    TextBoxGroupPanel
  },

  data () {
    return {
      reading: 11// 读数

    }
  },

  mounted () {
    let allDevices = JSON.parse(window.localStorage.getItem('electricalDevices'))
    if (Array.isArray(allDevices)) {
      this.electricalDevices = allDevices
    }
  },
  computed: {
    electricalDevices () {
      return this.$store.getters.phase
    },
    runningAccount () {
      if (this.electricalDevices.length) {
        return _.filter(this.electricalDevices, (item) => {
          return item.type === DEVICE_TYPES.PHASE && item.online
        }).length
      }
      return 0
    },
    warnAccount () {
      if (this.electricalDevices.length) {
        return _.filter(this.electricalDevices, (item) => {
          return item.type === DEVICE_TYPES.PHASE && item.isWarnning
        }).length
      }
      return 0
    },
    info () {
      return [{
        title: '运行',
        value: this.runningAccount,
        span: 12
      }, {
        title: '异常',
        value: this.warnAccount,
        span: 12,
        type: 'danger'
      }]
    }
  }
}
</script>
<style lang="styl">
  .router {
    position: absolute;
    right: 20px;
    bottom: 0;
    z-index: 100;
    display: block;
    width: 50px;
    height: 50px;
  }
</style>
